import { getOutbound,getOutboundDetail } from '@/services/erp/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import {
  FooterToolbar,
  ModalForm,
  PageContainer,
  ProDescriptions,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
import { FormattedMessage, history, SelectLang, useIntl, useModel } from '@umijs/max';
import { Button, Drawer, Input, message } from 'antd';
import React, { useRef, useState } from 'react';


const TableList: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.StockListItem>();
  const columns: ProColumns<API.StockListItem>[] = [
    {
      title: "序号",
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: "入库方式",
      dataIndex: 'type',
      hideInSearch:true,
    },
    {
      title: "总价格",
      dataIndex: 'totalPrice',
      valueType: 'money',
      hideInSearch:true,
    },
    {
      title: "总数量",
      dataIndex: 'totalCount',
      hideInSearch:true,
    },
    {
      title: "种类数量",
      dataIndex: 'skuCount',
      hideInSearch:true,
    },
    {
      title: "操作员",
      dataIndex: 'operator',
      hideInSearch:true,
    },
    {
      title: "提交时间",
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a
          key="detail"
          onClick={() => {
            setCurrentRow(record);
            setShowDetail(true)
          }}>
          查看详情
        </a>
      ],
    },
  ];

  const columnsDetail:[] = [
    {
      title: "商品名称",
      dataIndex: 'name',
      hideInSearch:true,
      key: 'name',
    },
    {
      title: "库存变动",
      dataIndex: 'changedStock',
      hideInSearch:true,
      key: 'changedStock',
    },

    {
      title: "商品价格",
      dataIndex: 'price',
      valueType: 'money',
      key: 'price',
      hideInSearch:true,
    },
  ];


  return (
    <PageContainer>
      <ProTable<API.StockListItem, API.PageParams>
        headerTitle="出库单列表"
        rowKey="id"
        cardBordered
        search={false}
        columns={columns}
        request={async (params, sorter, filter) => {
          const msg = await getOutbound(initialState?.currentStoreKey,{
            page: params.current-1,
            size: params.pageSize,
            ...params
          });
          return {
            data: msg.data,
            success: true,
            total: msg.dataSize,
          };
        }}
      />
       <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={true}
      >
        {currentRow?.type && (
          <div>
            <ProDescriptions<API.StockListItem>
              column={2}
              request={async () => ({
                data: currentRow || {},
              })}
              columns={columns}
            />
            <ProTable<API.StockListItem, API.PageParams>
              headerTitle="出库商品"
              rowKey="key"
              cardBordered
              search={false}
              options={false}
              columns={columnsDetail}
              request={async (params, sorter, filter) => {
                const msg = await getOutboundDetail(currentRow._id,{
                  page: params.current-1,
                  size: params.pageSize,
                  ...params
                });
                return {
                  data: msg.data,
                  success: true,
                  total: msg.dataSize,
                };
              }}
            />
          </div>
        )}
      </Drawer>
    </PageContainer>
  );
};

export default TableList;
